<template>
  <div class="menu">
    <div class="left">
      <div class="left_list first">icon</div>
      <div @click="blog" class="left_list">博客</div>
      <div @click="dynamic" class="left_list">动态</div>
    </div>
    <div class="right">
      <div @click="changeicon" class="right_list icon"><i :class="them"></i></div>
      <div class="right_list"><LoginVue/></div>
    </div>
  </div>
</template>

<script>
import LoginVue from './Login.vue';
import router from '../router';
export default {
  name: "Menu",
  components:{LoginVue},
  data(){
    return {
        icon : true
    }
  },
  methods:{
    blog(){
        router.push("/")
    },
    dynamic(){
        router.push("/dynamic")
    },
    changeicon(){
        this.icon = ! this.icon
        this.$store.commit("changeSkin",this.icon)
    }
  },
  computed:{
    them(){
        let now = this.icon ? 'el-icon-sunny' : 'el-icon-moon'
        return now
    }
  }
};
</script>

<style lang="less" scoped>
@import "../main.less";
.menu {
  height: 54px;
  width: 100%;
  padding: 5px 20px;
  display: flex;
  justify-content: space-between;
  .left {
    width: 300px;
    height: 100%;
    .left_list {
      width: 100px;
      height: 100%;
      .juzhong;
      float: left;
      cursor: pointer;
    }
  }
  .right {
    width: 150px;
    height: 100%;
    .right_list {
      height: 100%;
      width: 100px;
      .juzhong;
      float: left;
      cursor: pointer;
    }
    .icon {
      width: 50px;
      transition: all 1s;
      i{
        font-size: 24px;
      }
    }
  }
}

@media screen and (max-width: 800px) {
  /* 小于800px时 */
  .menu {
    height: 54px;
    width: 100%;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    .left {
      width: 150px;
      height: 100%;
      .left_list {
        width: 75px;
        height: 100%;
        .juzhong;
        float: left;
        cursor: pointer;
      }
      .first {
        display: none;
      }
    }
  }
}
</style>